<template>
	<view>
		<uni-nav-bar statusBar title="市场行情" :border='false' color="#000" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<image class="logo1" src="/static/common/logo2.png" mode=""></image>
			</block>
			<block slot="right">
				<image class="logo1" src="/static/common/logo2.png" mode=""></image>
			</block>
		</uni-nav-bar>
		<image class="BGImage" :src="getImageUrl('/static/common/BG.png')" mode=""></image>
		<view class="" style="position: relative;z-index: 2;">
			<view class="flex-row-space-between" style="margin: 30rpx;margin-top: 0;">
				<image class="logo1" src="/static/common/logo1.png" mode=""></image>
				<view class="flex-column-flex-end">
					<view class="title">
						2025-06-03 09:23:32
					</view>
					<view class="flex-row-flex-end">
						<view class="zt flex-column-center">
							开盘中
						</view>
					</view>

				</view>

			</view>
			<view class="xxView flex-row-flex-start">
				<uni-icons type="sound-filled" size="30" color="#FA9119"></uni-icons>
				<view class="xxTitle">
					正常当天回款！
				</view>
			</view>
			
			<view class="contentView">
				<view class="contentTop flex-row-center">
					<view class="topItem flex-column-center" v-for="(item,index) in topTitle" :key="index">
						{{item}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view v-for="(item,index) in 4" :key="index">
					<view class="contentItem flex-row-center">
					
							<view class="contentTitle flex-row-center">
								黄金
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								909.80
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								黄金
							</view>
							<view class="contentTitle flex-column-center">
								<view class="contentTitle" style="color: #E61515;">
									911.70
								</view>
								<view class="contentTitle" style="color: #36E615;">
									911.70
								</view>
							</view>
					
					</view>
				</view>
				<view class="topItem1 flex-column-center" >
					旧料回收
				</view>
				<view class="line">
					
				</view>
				
				<view v-for="(item,index) in 4" :key="index">
					<view class="contentItem flex-row-center">
					
							<view class="contentTitle flex-row-center" style="width: 30%;">
								黄金金条999
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;width: 20%;">
								908.89
							</view>
							<view class="contentTitle flex-row-center" style="width: 30%;">
								白银首饰999
							</view>
							<view class="contentTitle flex-column-center" style="color: #E61515;width: 20%;">
								911.70
							</view>
					
					</view>
				</view>
				
				<view class="topItem1 flex-column-center" >
					上交所报价
				</view>
				<view class="line">
					
				</view>
				<view v-for="(item,index) in 3" :key="index">
					<view class="contentItem flex-row-center">
					
							<view class="contentTitle flex-row-center">
								黄金(T+D)
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								909.80
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								黄金
							</view>
							<view class="contentTitle flex-column-center">
								<view class="contentTitle" style="color: #E61515;">
									911.70
								</view>
								<view class="contentTitle" style="color: #36E615;">
									911.70
								</view>
							</view>
					
					</view>
				</view>
				<view class="topItem1 flex-column-center" >
					国际现货
				</view>
				<view class="line">
					
				</view>
				<view v-for="(item,index) in 7" :key="index">
					<view class="contentItem flex-row-center">
					
							<view class="contentTitle flex-row-center">
								港金
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								909.80
							</view>
							<view class="contentTitle flex-row-center" style="color: #E61515;">
								黄金
							</view>
							<view class="contentTitle flex-column-center">
								<view class="contentTitle" style="color: #E61515;">
									911.70
								</view>
								<view class="contentTitle" style="color: #36E615;">
									911.70
								</view>
							</view>
					
					</view>
				</view>
				<view class="" style="height: 30rpx;">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		sign,
		driverSign,
		lineDetail,
		profile,
		setRole
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				topTitle:[
				'商品','回购'	,'商品','高/低'	
				],
				text: "温馨提示:以上行情仅供参考\n地址:广东省深圳市罗湖区\n业务咨询电话:19166279218\n",
				isSao: 0,
				userinfo: {},
				info: {
					line_name: '',
				},
				car_id: 0,
				group_id: 0,
				address: '',
				timer: null,
				currentTime: '',
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			// this.getLocation(0)
			// if(uni.getStorageSync('token')){
			// 	if(this.car_id){
			// 		this.lineDetail()

			// 	}
			// 	this.profile()
			// }

		},
		onLoad(e) {
			// console.log(e)
			// 1. 从 options.scene 中获取编码后的参数
			const encodedScene = e.scene; // 这里得到的是 "car_id%3D20%26group_id%3D3"

			if (encodedScene) {
				this.isSao = 1
				// 2. 对参数进行URL解码
				const decodedScene = decodeURIComponent(encodedScene);
				// 解码后： "car_id=20&group_id=3"

				// 3. 将参数字符串解析为对象，方便使用
				const params = {};
				decodedScene.split('&').forEach(item => {
					const [key, value] = item.split('=');
					params[key] = value; // 注意：这里获取的value是字符串，如需数字类型需转换
				});
				this.car_id = params.car_id
				this.group_id = params.group_id
				console.log('车辆ID:', params.car_id); // 输出：20
				console.log('组ID:', params.group_id); // 输出：3

			} else {
				this.isSao = 0
				this.car_id = 0
				this.group_id = 1
			}
			if (this.isSao) {
				this.lineDetail()
			}

			this.updateTime(); // 初始化时间显示
			this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		// beforeDestroy() {
		//   clearInterval(this.timer); // 清除定时器
		// },
		methods: {
			setRole() {
				var data = {
					group_id: 3
				}
				setRole(data).then(res => {

					this.profile()


				})
			},
			lineDetail() {

				var data = {
					car_id: this.car_id
				}
				lineDetail(data).then(res => {

					this.info = res.data


				})
			},
			profile() {

				var data = {

				}
				profile(data).then(res => {
					// uni.navigateTo({
					// 	url:'/pages/index/setRole'
					// })
					uni.setStorageSync('userinfo', res.data)
					this.userinfo = res.data
					if (res.data.group_id) {

					} else {
						if (this.car_id) {
							if (this.group_id == 3) {
								this.setRole()
							} else {
								uni.navigateTo({
									url: '/pages/index/setRole'
								})
							}


						}
					}



				})
			},
			locationRequest(lat, lng, type) {


				var latLng = lat + ',' + lng
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=3U7BZ-EHTC5-DYHIN-IEEUQ-PP7Y3-AGF3L&location=' +
						latLng,
					data: {

					},
					header: {

					},
					success: (res) => {
						if (type) {
							uni.showToast({
								title: '位置更新成功',
								icon: 'none',
								mask: true,
								duration: 1500,
							});
						}

						this.address = res.data.result.address

					}
				});
			},

			getLocation(type) {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.locationRequest(res.latitude, res.longitude, type)
					}
				});
			},
			buttonClick() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				// if(!this.car_id){
				// 	this.showToast('请扫码签到')
				// 	return
				// }
				var data = {
					is_scan: this.isSao,
					car_id: this.car_id,
					sign_address: this.address
				}
				var url = sign
				if (this.userinfo.group_id == 3) {
					url = driverSign
				}
				url(data).then(res => {
					this.showToast('签到成功')
				})
			},
			updateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0'); // 补齐为两位数
				const minutes = now.getMinutes().toString().padStart(2, '0'); // 补齐为两位数
				const seconds = now.getSeconds().toString().padStart(2, '0'); // 补齐为两位数
				this.currentTime = `${hours}:${minutes}:${seconds}`;
			},



		}
	}
</script>

<style lang="scss">
	.title {
		font-weight: 400;
		font-size: 28rpx;
		color: #171514;
	}

	.zt {
		width: 108rpx;
		height: 44rpx;
		background: #FA9119;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.xxView {
		margin: 32rpx;
		height: 96rpx;

		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(190, 111, 21, 0.16);
		border-radius: 16rpx 16rpx 16rpx 16rpx;


		padding: 0 30rpx;
	}

	.xxTitle {
		font-weight: 400;
		font-size: 26rpx;
		color: #4A4949;
	}
	.contentView{


		
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.contentTop{
		height: 87rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.topItem{
		width: 25%;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #444241;
	}
	.contentItem{
		margin: 10rpx 32rpx;
		height: 110rpx;
		background: #F9F9F9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.line{
		width: 100%;
		height: 10rpx;
		background: #F7F7F7;
	}
	.topItem1{
		font-weight: 600;
		font-size: 28rpx;
		color: #171514;
		height: 87rpx;
	}
	.contentTitle{
		width: 25%;
		font-weight: 400;
		font-size: 26rpx;
		color: #171514;
	}
</style>